<template>
  <div class="demo" :class="{
    active: isActive,
    'text-danger': hasError
  }">
    绑定样式类
  </div>
  <div :class="classObj">
    元素要挂的类比较多，那么推荐将对象写到数据里面
  </div>

  <div :class="[isActive ? Active : '', error]">
    用数组绑定的类，数组的每一项一般都是一个 ref 值。且支持三目运算
  </div>

  写法2：三目运算表达式可能依赖多个条件。数组里面使用嵌套对象的方法
  <div :class="[{ active: isActive }, error]"></div>
  <hr>

  <div :style="{
    color: activeColor,
    fontSize: fontSize + 'px'
  }">
    绑定内连样式
  </div>

  <div :style="styleObj">
    style 所绑定的对象在 script 里面进行声明,模板会清爽一点
  </div>

  <div :style="styleArr">数组的方式绑定样式,利用数组的方法。比如pop，push控制样式</div>


</template>

<script setup>
  import { ref, reactive } from "vue";
  /*class绑定对象，键就是要挂上去样式类，值对应一个布尔值  */
  const isActive = ref(true)
  const hasError = ref(false)
  setTimeout(() => {
    hasError.value = true
  }, 1000);


  const classObj = reactive({
    active: true,
    isFinite: true,
    'text-danger': false
  })
  setTimeout(() => {
    classObj['text-danger'] = true
  }, 2000);


  /* 数组语法，数组的每一项一般都是一个 ref 值，ref 所对应的就是真实的要挂上去的类 */
  const Active = ref('active')
  const error = ref('text-danger')
  setTimeout(() => {
    Active.value = 'normal'
  }, 3000)


  /* 绑定内连样式 */
  const activeColor = ref('red')
  const fontSize = ref(30)
  setTimeout(() => {
    activeColor.value = 'blue'
  }, 3000);

  const styleObj = reactive({
    color: activeColor,
    fontSize: fontSize.value + 'px'
  })

  /* 数组的方式。数组中绑定多个样式对象 */
  const styleObj2 = reactive({
    textDecoration: 'underline'
  })
  const styleArr =  ref([styleObj,styleObj2])
  setTimeout(() => {
    styleArr.value.pop()
  }, 4000);

</script>

<style lang="scss" scoped></style>